import {GeneratedCodeConfig} from '../types'

export default {
    promptList: [
        {
            id: '64671b07-32e1-429c-83c1-0a4a17d0ece0',
            name: 'show page',
            des: 'show page',
            imgUrl: 'https://i.ibb.co/Xzxry6n/inula-test.png',
            prompt: `
Refer to the following code format to output the screenshot code.
<html>
  <head>
    <title>OpenInula Documentation</title>
    <script src="https://registry.npmmirror.com/react/18.2.0/files/umd/react.development.js"></script>
    <script src="https://registry.npmmirror.com/react-dom/18.2.0/files/umd/react-dom.development.js"></script>
    <script src="https://registry.npmmirror.com/@babel/standalone/7.23.6/files/babel.js"></script>
    <script src="https://registry.npmmirror.com/dayjs/1.11.10/files/dayjs.min.js"></script>
    <script src="https://registry.npmmirror.com/antd/5.12.2/files/dist/antd.js"></script>
    <script src="https://registry.npmmirror.com/@ant-design/icons/5.2.6/files/dist/index.umd.js"></script>
    <script src="https://registry.npmmirror.com/@ant-design/pro-components/2.6.43/files/dist/pro-components.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/5.12.2/antd.min.css" />
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      #root {
        display: flex;
        height: 100vh;
      }
      .sidebar {
        background-color: #2b65d4;
        padding: 20px;
        color: white;
        width: 200px;
      }
      .sidebar h1 {
        font-size: 24px;
        font-weight: bold;
      }
      .sidebar ul {
        list-style: none;
        padding: 10px 0;
        margin: 0;
      }
      .sidebar ul li {
        margin: 10px 0;
      }
      .sidebar ul li a {
        color: white;
        text-decoration: none;
        font-size: 16px;
      }
      .content {
        flex: 1;
        background-color: white;
        padding: 20px;
      }
      .content .header {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;
      }
      .content .header .title {
        font-size: 24px;
        font-weight: bold;
      }
      .content .header .breadcrumb {
        margin-left: 10px;
        color: #888;
      }
      .content .header .search-bar {
        margin-left: auto;
      }
      .content .header .search-bar input {
        padding: 5px;
        border: 1px solid #ddd;
      }
      .content .title {
        font-size: 40px;
        font-weight: bold;
        margin-top: 20px;
      }
      .content .text-section {
        font-size: 16px;
        margin-top: 10px;
        color: #333;
      }
      .content .code-section {
        background-color: #f5f5f5;
        border-left: 5px solid #e0e0e0;
        padding: 10px;
        margin: 20px 0;
      }
      .content .code-section code {
        font-family: Consolas, monospace;
      }
      .content .heading {
        font-size: 20px;
        font-weight: bold;
        margin-top: 20px;
      }
      .content .description {
        font-size: 16px;
        margin-top: 10px;
        color: #333;
      }
      .content .interface-definition {
        background-color: #f5f5f5;
        border-left: 5px solid #e0e0e0;
        padding: 10px;
        margin: 20px 0;
        font-family: Consolas, monospace;
      }
      .sidebar .theme-toggle {
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-top: 20px;
      }
      .sidebar .theme-toggle svg {
        margin-right: 5px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const {
        Layout,
        Breadcrumb,
        Input,
        Menu,
        Typography,
        Space,
        Card
      } = antd;
      const { HomeOutlined, SearchOutlined, MenuOutlined } = icons;
      const { Title, Text } = Typography;

      const App = () => {
        return (
          <Layout style={{ height: "100vh" }}>
            <Layout.Sider width={200} style={{ background: "#2b65d4", color: "white" }}>
              <div style={{ padding: "20px", fontSize: "24px", fontWeight: "bold" }}>
                openInula
              </div>
              <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} style={{ background: "#2b65d4", color: "white" }}>
                <Menu.Item key="1">
                  <a href="#">Inula</a>
                </Menu.Item>
                <Menu.Item key="2">
                  <a href="#">Inula-X</a>
                </Menu.Item>
                <Menu.Item key="3">
                  <a href="#">Inula-intl</a>
                </Menu.Item>
                <Menu.Item key="4">
                  <a href="#">Inula-router</a>
                </Menu.Item>
                <Menu.Item key="5">
                  <a href="#">Inula-request</a>
                </Menu.Item>
              </Menu>
            </Layout.Sider>

            <Layout>
              <Layout.Content style={{ padding: "20px", background: "white" }}>
                <div style={{ display: "flex", alignItems: "center", borderBottom: "1px solid #f0f0f0", paddingBottom: "10px" }}>
                  <Breadcrumb separator=">" style={{ marginLeft: "10px", color: "#888" }}>
                    <Breadcrumb.Item href="#"><HomeOutlined /></Breadcrumb.Item>
                    <Breadcrumb.Item>Inula-request</Breadcrumb.Item>
                  </Breadcrumb>
                  <div style={{ marginLeft: "auto" }}>
                    <Input prefix={<SearchOutlined />} placeholder="搜索" style={{ width: 200 }} />
                  </div>
                </div>
                <Title>Inula-request</Title>
                <Text style={{ fontSize: "16px", color: "#333" }}>欢迎使用 inula-request 请求组件，接下来本文档将对 inula-request API 使用进行一个详细介绍，帮助您更便捷地发送网络请求!</Text>
                <Title level={2} style={{ marginTop: "20px" }}>Inula-request 请求方法引入</Title>
                <Text style={{ fontSize: "16px", color: "#333" }}>方便起见，该文档将使用 ir 别名介绍 inula-request 请求方法，即使用如下方式导入请求组件：</Text>
                <div style={{ backgroundColor: "#f5f5f5", borderLeft: "5px solid #e0e0e0", padding: "10px", margin: "20px 0" }}>
                  <code>import ir from 'inula-request';</code>
                </div>
                <Title level={2} style={{ marginTop: "20px" }}>Inula-request 全局 API</Title>
                <Title level={3} style={{ marginTop: "20px" }}>ir(config)</Title>
                <Text style={{ fontSize: "16px", color: "#333" }}>功能介绍</Text>
                <Text style={{ fontSize: "16px", color: "#333" }}>该请求方法为通用请求方法，可以通过配置 config 参数完成多种形式的网络请求，关于 config 具体参数配置将在 参数配置章节 详细介绍。</Text>
                <div style={{ backgroundColor: "#f5f5f5", borderLeft: "5px solid #e0e0e0", padding: "10px", margin: "20px 0", fontFamily: "Consolas, monospace" }}>
                  <code>ir&lt;T = unknown&gt;(config: IrRequestConfig): Promise&lt;IrResponse&lt;T&gt;&gt;;</code>
                </div>
              </Layout.Content>
            </Layout>
          </Layout>
        );
      };

      ReactDOM.render(<App />, document.getElementById('root'));
    </script>
  </body>
</html>

            `,
            type: GeneratedCodeConfig.REACT_ANTD,
        },
        {
            id: '64671b07-32e1-429c-83c1-0a4a17dkkce0',
            name: 'login form',
            des: 'login form',
            imgUrl: 'https://i.ibb.co/XJtPfqh/195.png',
            prompt: `
            - Refer to example code format to output the screenshot code.
            - Add logical code for operation columns
            - If there is an edit in the operation, add form logic according to the example code
            - If there is a new operator  in the screenshot operation column, add it to the output code operation column.
            - Must output code according to the example.
            
            <!-- example code  -->
            <html>
                <head>
                <title>Ant Design Login Page</title>
                <script src="https://registry.npmmirror.com/react/18.2.0/files/umd/react.development.js"></script>
                <script src="https://registry.npmmirror.com/react-dom/18.2.0/files/umd/react-dom.development.js"></script>
                <script src="https://registry.npmmirror.com/@babel/standalone/7.23.6/files/babel.js"></script>
                <script src="https://registry.npmmirror.com/dayjs/1.11.10/files/dayjs.min.js"></script>
                <script src="https://registry.npmmirror.com/antd/5.12.2/files/dist/antd.js"></script>
                <script src="https://registry.npmmirror.com/@ant-design/icons/5.2.6/files/dist/index.umd.js"></script>
                <script src="https://registry.npmmirror.com/@ant-design/pro-components/2.6.43/files/dist/pro-components.min.js"></script>
                <style>
                    body, html {
                    background-color: #f0f2f5;
                    height: 100%;
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
                    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
                    sans-serif;
                    color: rgba(0, 0, 0, 0.85);
                    }
                    .login-container {
                    display: flex;
                    height: 100%;
                    justify-content: center;
                    align-items: center;
                    }
                    .login-card {
                    width: 320px;
                    padding: 45px 35px;
                    background: #fff;
                    border-radius: 8px;
                    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                    text-align: center;
                    }
                    .logo {
                    width: 40px;
                    height: 40px;
                    margin-bottom: 24px;
                    }
                    .ant-btn {
                    width: 100%;
                    }
                    .bottom-links {
                    display: flex;
                    justify-content: space-between;
                    }
                    .other-methods {
                    display: flex;
                    justify-content: center;
                    margin-top: 16px;
                    }
                    .other-methods img {
                    margin: 0 8px;
                    width: 24px;
                    height: 24px;
                    }
                    .footer {
                    text-align: center;
                    margin-top: 24px;
                    }
                </style>
                </head>
                <body>
                <div id="root"></div>
                <script type="text/babel">
                    const { Layout, Form, Input, Button, Checkbox, Tabs } = antd;
                    const { UserOutlined, LockOutlined, AlipayCircleOutlined, TaobaoCircleOutlined, WeiboCircleOutlined } = icons;

                    function App() {
                    const onFinish = (values) => {
                        console.log('Received values from form: ', values);
                    };

                    return (
                        <div className="login-container">
                        <div className="login-card">
                            <img src="https://placehold.co/40x40" alt="Ant Design logo" className="logo"/>
                            <h2>Ant Design</h2>
                            <p>Ant Design 是西湖区最具影响力的 Web 设计规范</p>
                            <Tabs defaultActiveKey="1">
                            <Tabs.TabPane tab="账户密码登录" key="1">
                                <Form name="login_form" onFinish={onFinish} initialValues={{ remember: true }}>
                                <Form.Item name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
                                    <Input prefix={<UserOutlined />} placeholder="admin" />
                                </Form.Item>
                                <Form.Item name="password" rules={[{ required: true, message: '请输入密码!' }]}>
                                    <Input prefix={<LockOutlined />} type="password" placeholder="888888" />
                                </Form.Item>
                                <Form.Item>
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                    <Checkbox>自动登录</Checkbox>
                                    </Form.Item>
                                    <a href="" style={{ float: 'right' }}>忘记密码</a>
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                    登录
                                    </Button>
                                </Form.Item>
                                </Form>
                            </Tabs.TabPane>
                            <Tabs.TabPane tab="手机号登录" key="2">
                                手机号登录表单
                            </Tabs.TabPane>
                            </Tabs>
                            <div className="other-methods">
                            <AlipayCircleOutlined style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.6)' }} />
                            <TaobaoCircleOutlined style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.6)' }} />
                            <WeiboCircleOutlined style={{ fontSize: '24px', color: 'rgba(0, 0, 0, 0.6)' }} />
                            </div>
                            <a href="">注册账户</a>
                            <div className="footer">
                            ©2017 蚂蚁金服体验技术部出品
                            </div>
                            <div className="bottom-links">
                            <a href="">帮助</a>
                            <a href="">隐私</a>
                            <a href="">条款</a>
                            </div>
                        </div>
                        </div>
                    );
                    }

                    ReactDOM.render(<App />, document.getElementById('root'));
                </script>
                </body>
            </html>         
            `,
            type: GeneratedCodeConfig.REACT_ANTD,
        }
    ],
    
}